<template>
  <el-image-viewer v-if="showImage" :url-list="[imageUrl]" @close="showImage = false" />
  <el-dialog v-model="dialogVisible" fullscreen :title="fileInfo?.filename" @close="handleClose">
    <Video ref="videoPlayerRef" />
    <Audio ref="audioPlayerRef" />
    <Pdf ref="pdfRef" />
    <Excel ref="excelRef" />
    <Document ref="docRef" />
    <Code ref="CodeRef" />
  </el-dialog>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { ElMessage } from "element-plus";
import Video from "./components/Video.vue";
import Audio from "./components/Audio.vue";
import Code from "./components/Code.vue";
import Pdf from './components/Pdf.vue'
import Document from "./components/Document.vue";
import Excel from './components/Excel.vue'

const showImage = ref(false);
const dialogVisible = ref(false);
const videoPlayerRef = ref(null);
const audioPlayerRef = ref(null);
const pdfRef = ref(null);
const excelRef = ref(null);
const docRef = ref(null);
const CodeRef = ref(null);

const fileInfo = ref(null);
const imageUrl = ref(null);

const getFileTypeName = (type) => {
  const imageTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
  const videoTypes = ["video/mp4", "video/avi", "video/mkv"];
  const audioTypes = ["audio/mpeg", "audio/wav", "audio/mp3"];
  const pdfTypes = ["application/pdf"];
  const excelTypes = [
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    "application/vnd.ms-excel",
  ];
  const textTypes = [
    "text/",
    "application/json",
    "application/xml",
    "application/javascript",
    "application/ecmascript",
    "application/x-sh",
    "application/x-httpd-php",
    "application/x-yaml",
  ];
  const documentTypes = [
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    "application/vnd.ms-powerpoint",
    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
  ]
  const otherTypes = ["application/octet-stream"];
  if (imageTypes.includes(type)) {
    return "image";
  }
  if (videoTypes.includes(type)) {
    return "video";
  }
  if (audioTypes.includes(type)) {
    return "audio";
  }
  if (pdfTypes.includes(type)) {
    return "pdf";
  }
  if (excelTypes.includes(type)) {
    return "excel"
  }
  if (documentTypes.includes(type)) {
    return "document";
  }
  if (textTypes.some(item => type.startsWith(item) || type === item)) {
    return "code";
  }
  if (otherTypes.includes(type)) {
    return "other";
  }
  return "unknown";
};

const showPreview = async (row) => {
  fileInfo.value = row;
  const typeName = getFileTypeName(row.type);
  const suffix = row.filename.split(".").pop();
  //sort: 1.视频 2.图片 3.音频 4.文档 5：其他
  if (typeName == "image" || row.sort == 2) {
    showImage.value = true;
    imageUrl.value = `${import.meta.env.VITE_BASE_URL}uploads/files/${row.hash}.${suffix}`;
    console.log("图片地址", imageUrl.value);
  } else {
    dialogVisible.value = true;
    if (typeName == "video" || row.sort == 1) {
      await nextTick();
      const vidoeUrl = `${import.meta.env.VITE_BASE_URL}uploads/hls/${row.hash}/index.m3u8`;
      console.log("视频地址", vidoeUrl);
      videoPlayerRef.value.play(vidoeUrl);
    } else {
      if (row.size > 1024 * 1024 * 10) {
        ElMessage.error("文件过大，无法预览")
        return
      }
      console.log("文件类型", typeName);
      try {
        await nextTick();
        const suffix = row.filename.split(".").pop();
        const url = `${import.meta.env.VITE_BASE_URL}uploads/files/${row.hash}.${suffix}`;
        console.log("文件地址", url);
        if (typeName == "audio" || row.sort == 3) {
          audioPlayerRef.value.play(url, row.filename);
          return
        }
        if (typeName == "pdf") {
          pdfRef.value.open(url)
          return
        }
        if (typeName == "excel") {
          excelRef.value.open(url)
          return
        }
        if (typeName == "document") {
          docRef.value.open(url);
          return
        }
        if (typeName == "code") {
          CodeRef.value.open(url);
        } else {
          ElMessage.error("暂不支持的文件类型, 请下载后查看");
        }
      } catch (error) {
        console.error("获取下载链接失败:", error);
      }
    }
  }
};

const handleClose = () => {
  console.log("关闭窗口");
  showImage.value = false;
  videoPlayerRef.value.close();
  audioPlayerRef.value.close();
  CodeRef.value.close();
  pdfRef.value.close();
  excelRef.value.close();
  docRef.value.close();
  dialogVisible.value = false;
};
defineExpose({ showPreview });
</script>
